<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" size="960px" class="demand_box" @close="resetForm()">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">添加素材</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="mt_tab">
                <el-radio-group v-model="radio" size="small" @change="selectType">
                    <el-radio-button :label="1">本地视频</el-radio-button>
                    <el-radio-button :label="2" :disabled="is_qc">千川账户视频</el-radio-button>
                    <el-radio-button :label="3">达人视频</el-radio-button>
                </el-radio-group>
            </div>
            <template v-if="radio==1">
                <div class="seach_mt flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <el-input style="width:216px" :disabled="loading" clearable size="small" placeholder="素材名称" suffix-icon="el-icon-search" @change="getDataList(1)" v-model="queryInfo.query">
                        </el-input>
                        <el-date-picker style="width:260px;margin-left:12px" :disabled="loading" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" clearable size="small" @change="getDataList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                        <el-select style="width:160px;margin-left:12px" :disabled="loading" clearable size="small" v-model="queryInfo.tag" placeholder="请选择标签" multiple collapse-tags @change="getDataList(1)">
                            <el-option v-for="item in tag_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="flexbox flexcenter">
                        <div class="flexbox flexcenter drop_box">
                            <span class="drop_title">上传时间</span>
                        </div>
                        <div class="icon_btn icon_btn_32" style="margin-left:10px" @click="sortFun('desn')" v-if="queryInfo.order==''|| queryInfo.order=='asc'"><img src="../../assets/img/rank_icon.svg" alt=""></div>
                        <div class="icon_btn icon_btn_32 rote_180" style="margin-left:10px" @click="sortFun('asc')" v-else><img src="../../assets/img/rank_icon.svg" alt=""></div>
                    </div>
                </div>
                <div class="demand_center flexbox flex" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="person_left">
                        <div class="flexbox flexcolumn height_100">
                            <div class="mat_head">目录</div>
                            <div class="person_job flex1">
                                <div class="person_btn">
                                    <el-input placeholder="请输入目录搜索" clearable prefix-icon="el-icon-search" v-model="catalogQuery">
                                    </el-input>
                                </div>
                                <el-tree ref="tree" accordion :expand-on-click-node='true' :data="filteredData(catalogQuery,catalogData)" highlight-current :current-node-key="currentNodekey" @node-click="getTreeData" class="part_tree" node-key="id" :props="defaultProps">
                                    <div class="flexbox flexcenter flexbetween custom-tree-node" slot-scope="{ node, data }">
                                        <div class="part_left flexbox flexcenter">
                                            <img src="../../assets/img/tree_icon.svg" alt="" class="tree_icon">
                                            <span class="tree_title">{{node.label}}</span>
                                        </div>
                                    </div>
                                </el-tree>
                            </div>
                        </div>
                    </div>
                    <div class="person_right flex flexbox flexcolumn">
                        <div class="mat_head">素材列表</div>
                        <div class="material_content over_box flex" v-infinite-scroll="load" :infinite-scroll-disabled="isload">
                            <div class="material_item" v-for="(item,index) in tableData" :key="index">
                                <div class="material_img flexbox flexcenter flexjust" @mouseenter="playVedio(index)" @mouseleave="pauseVedio(index)">
                                    <el-checkbox v-model="item.checked" class="ma_check" @change="checkVedio(item)" :disabled="hasCheck.length>=(9-max_length)"></el-checkbox>
                                    <img :src="item.img_url" alt="" class="material_img_big">
                                    <video :id="`media${index}`" :src="item.material" muted preload width="90px" height="100%" class="material_img_small"></video>
                                </div>
                                <div class="material_info">
                                    <div class="material_t">
                                        <template v-if="item.area==1">
                                            <el-tooltip content="" placement="top">
                                                <div slot="content" class="flexbox flexcenter font_14">
                                                    核心创意人：{{item.centre_name}}
                                                    <span class="mt_line"></span>
                                                    剪辑：{{item.editor_name}}
                                                </div>
                                                <div class="material_t_name">{{item.material_name}}</div>
                                            </el-tooltip>
                                        </template>
                                        <template v-else-if="item.area==2">
                                            <el-tooltip content="" placement="top">
                                                <div slot="content" class="flexbox flexcenter font_14">
                                                    编导：{{item.director_name}}
                                                    <span class="mt_line"></span>
                                                    拍摄：{{item.photographer_name}}
                                                    <span class="mt_line"></span>
                                                    剪辑：{{item.editor_name}}
                                                </div>
                                                <div class="material_t_name">{{item.material_name}}</div>
                                            </el-tooltip>
                                        </template>
                                        <div class="material_t_tag">
                                            {{item.tag.length>0?item.tag.map((item=>{return item.name})).join('/'):'暂无标签'}}
                                        </div>
                                        <div class="material_t_time">ID:{{item.material_id==0?'无':item.material_id}}</div>
                                        <div class="material_t_time">{{item.create_time}}</div>
                                    </div>
                                    <div class="material_c">
                                        <div class="material_c_item flexbox flexcenter flexbetween">
                                            <span class="material_c_text1">消耗</span>
                                            <span class="material_c_text2">{{item.stat_cost?item.stat_cost:0}}</span>
                                        </div>
                                        <div class="material_c_item flexbox flexcenter flexbetween">
                                            <span class="material_c_text1">展示</span>
                                            <span class="material_c_text2">{{item.show_cnt?item.show_cnt:0}}</span>
                                        </div>
                                        <div class="material_c_item flexbox flexcenter flexbetween">
                                            <span class="material_c_text1">点击率</span>
                                            <span class="material_c_text2">{{item.click_rate?item.click_rate:0}}%</span>
                                        </div>
                                        <div class="material_c_item flexbox flexcenter flexbetween">
                                            <span class="material_c_text1">支付ROI</span>
                                            <span class="material_c_text2">{{item.pay_order_roi?item.pay_order_roi:0}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="radio==2">
                <div class="demand_center flexbox flex" style="margin-top:16px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="material_content over_box flex">
                        <div class="material_item" v-for="(item,index) in tableData" :key="index">
                            <div class="material_img flexbox flexcenter flexjust" @mouseenter="playVedio(index)" @mouseleave="pauseVedio(index)">
                                <el-checkbox v-model="item.checked" class="ma_check" @change="checkVedio(item)" :disabled="hasCheck.length>=(9-max_length)" v-if="!item.material.includes('素材所属主体与开发者主体不一致无法获取URL')"></el-checkbox>
                                <img :src="item.img_url" alt="" class="material_img_big">
                                <video :id="`media${index}`" :poster="item.img_url" :src="item.material" muted preload width="90px" height="100%" class="material_img_small"></video>
                            </div>
                            <div class="material_info">
                                <div class="material_t">
                                    <div class="material_t_name">{{item.material_name}}</div>
                                    <div class="material_t_time">ID:{{item.material_id==0?'无':item.material_id}}</div>
                                    <div class="material_t_time">{{item.create_time}}</div>
                                </div>
                                <div class="material_c">
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">消耗</span>
                                        <span class="material_c_text2">{{item.stat_cost}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">展示</span>
                                        <span class="material_c_text2">{{item.show_cnt}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">点击率</span>
                                        <span class="material_c_text2">{{item.click_rate}}%</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">支付ROI</span>
                                        <span class="material_c_text2">{{item.pay_order_roi}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="radio==3">
                <div class="demand_center flexbox flex" style="margin-top:16px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="material_content over_box flex" v-infinite-scroll="load3" :infinite-scroll-disabled="isload3">
                        <div class="material_item" v-for="(item,index) in tableData" :key="index">
                            <div class="material_img flexbox flexcenter flexjust" @mouseenter="playVedio(index)" @mouseleave="pauseVedio(index)">
                                <el-checkbox v-model="item.checked" class="ma_check" @change="checkVedio(item)" :disabled="hasCheck.length>=(9-max_length)" v-if="!item.material.includes('素材所属主体与开发者主体不一致无法获取URL')"></el-checkbox>
                                <img :src="item.img_url" alt="" class="material_img_big">
                                <video :id="`media${index}`" :poster="item.img_url" :src="item.material" muted preload width="90px" height="100%" class="material_img_small"></video>
                            </div>
                            <div class="material_info">
                                <div class="material_t">
                                    <div class="material_t_name">{{item.title}}</div>
                                    <div class="material_t_time">ID:{{item.material_id==0?'无':item.material_id}}</div>
                                    <!-- <div class="material_t_time">{{item.create_time}}</div> -->
                                </div>
                                <!-- <div class="material_c">
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">消耗</span>
                                        <span class="material_c_text2">{{item.stat_cost}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">展示</span>
                                        <span class="material_c_text2">{{item.show_cnt}}</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">点击率</span>
                                        <span class="material_c_text2">{{item.click_rate}}%</span>
                                    </div>
                                    <div class="material_c_item flexbox flexcenter flexbetween">
                                        <span class="material_c_text1">支付ROI</span>
                                        <span class="material_c_text2">{{item.pay_order_roi}}</span>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="mat_footer flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="has_text">
                        已选：<span class="text_red">{{hasCheck.length}}</span>/{{9-max_length}}
                    </div>
                    <div class="has_mat" v-for="(item,index) in hasCheck" :key="index">
                        <img src="../../assets/img/mar_close.png" alt="" class="mar_close" @click="deletCheck(index,item)">
                        <img :src="item.material.img_url" alt="" class="has_img material_img_small">
                    </div>
                </div>
                <div>
                    <el-button plain size="small" class="el-button-width" @click="resetForm()">取 消</el-button>
                    <el-button type="primary" size="small" class="el-button-width" @click="submitForm()">保 存</el-button>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            currActive: 1,
            loading: false,
            dialogVisible: false,
            max_length: null,
            isload: false,
            isload3: false,
            radio: 1,
            is_qc: false, //素材视频是否可选
            catalogData: [], //目录列表
            tableData: [], //本地视频
            currentNodekey: 0, //默认选中的节点树
            catalogQuery: "",
            hasCheck: [],
            tag_list: [],
            aweme_id: "",
            product_id: "",
            queryInfo: {
                page: 1,
                limit: 10,
                query: "",
                date: [],
                cate_id: "",
                field: "create_time",
                order: "",
                channel: 1,
                reject: 0,
                tag: [],
                need_field: ["show_cnt", "click_rate"],
            },

            awemeInfo: {
                count: null,
                cursor: null,
                has_more: null,
            },

            titokInfo: {
                advertiser_id: "",
            },

            catalogueInfo: {
                channel: 1,
                soure_type: 1,
            },

            defaultProps: {
                children: "next",
                label: "name",
            },
        };
    },
    created() {
        this.$bus.on("addMateri", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.is_qc = value.is_qc;
            this.max_length = value.length;
            this.titokInfo.advertiser_id = value.advertiser_id;
            this.aweme_id = value.aweme_id;
            this.product_id = value.product_id;
            this.getCatalogueList();
            this.getDataList();
            this.getTagList();
        });
    },
    beforeDestroy() {
        this.$bus.off("addMateri");
    },
    methods: {
        //获取标签列表
        async getTagList() {
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/tagList",
                {
                    page: 1,
                    limit: 0,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.tag_list = res.data.list;
            }
        },

        // 视频播放
        playVedio(index) {
            let media = "media" + index;
            let myVideo = document.getElementById(media);
            // myVideo.muted = false;
            myVideo.controls = "controls";
            myVideo.play();
        },

        // 视频暂停
        pauseVedio(index) {
            let media = "media" + index;
            let myVideo = document.getElementById(media);
            // myVideo.muted = true;
            myVideo.controls = "";
            myVideo.pause();
        },

        // tab切换
        changeCatalogue(index) {
            this.currActive = index;
            this.catalogueInfo.channel = index;
            this.queryInfo.cate_id = "";
            this.queryInfo.channel = index;
            this.getCatalogueList();
            this.getDataList();
        },

        // 树形节点点击
        getTreeData(data) {
            if (data.next.length == 0) {
                this.tableData = [];
                this.queryInfo.cate_id = data.id;
                this.queryInfo.order = "";
                this.queryInfo.page = 1;
                this.getDataList();
            }
        },

        // playVideo(url) {
        //     const attr = {
        //         dialogVsb: true,
        //         url: url,
        //     };
        //     this.$bus.emit("playVideo", attr);
        // },

        // 排序
        sortFun(val) {
            this.queryInfo.order = val;
            this.queryInfo.page = 1;
            this.getDataList();
        },

        //获取目录列表
        async getCatalogueList() {
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/catalog",
                this.catalogueInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let arrText = {
                    brand_id: "",
                    name: "全部",
                    next: [],
                };
                res.data.unshift(arrText);
                this.catalogData = res.data;
            }
        },

        //获取本地视频
        async getDataList() {
            this.loading = true;
            this.isload = true;
            const { data: res } = await this.$http.post(
                "adminapi/materialv2/materialListQc",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.isload = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.isload = false;
                let list = [];
                let data = res.data.list;
                this.total = res.data.count;
                for (let i in data) {
                    list.push({
                        checked: false,
                        id: data[i].id,
                        material: data[i].material,
                        img_url:
                            data[i].material +
                            "&x-oss-process=video/snapshot,t_0,f_jpg",
                        material_name: data[i].material_name,
                        duration: data[i].duration,
                        width: data[i].width,
                        height: data[i].height,
                        material_id: data[i].material_id,
                        create_time: data[i].create_time,
                        stat_cost: data[i].stat_cost,
                        show_cnt: data[i].show_cnt,
                        click_rate: data[i].click_rate,
                        pay_order_roi: data[i].pay_order_roi,
                        cate_type: "video",
                        material_source: "LOCAL",
                        image_mode:
                            data[i].width / data[i].height == 0.5625
                                ? "VIDEO_VERTICAL"
                                : "VIDEO_LARGE",
                        area: data[i].area,
                        photographer_name: data[i].photographer_name,
                        director_name: data[i].director_name,
                        editor_name: data[i].editor_name,
                        centre_name: data[i].centre_name,
                        tag: data[i].tag,
                    });
                }
                for (let i in list) {
                    for (let a in this.hasCheck) {
                        if (list[i].id == this.hasCheck[a].material.id) {
                            list[i].checked = true;
                        }
                    }
                }
                if (this.queryInfo.page == 1) {
                    this.tableData = list;
                } else {
                    this.tableData = this.tableData.concat(list);
                }
            }
        },

        // 获取素材视频
        async getTitokVideo() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_video",
                this.titokInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                let list = [];
                for (let i in res.data) {
                    list.push({
                        checked: false,
                        id: res.data[i].id,
                        material: res.data[i].url,
                        img_url: res.data[i].poster_url,
                        material_name: res.data[i].filename,
                        duration: res.data[i].duration,
                        width: res.data[i].width,
                        height: res.data[i].height,
                        material_id: res.data[i].material_id,
                        create_time: res.data[i].create_time,
                        cate_type: "video",
                        stat_cost: 0,
                        show_cnt: 0,
                        click_rate: 0,
                        pay_order_roi: 0,
                        material_source: "OTHER",
                        image_mode:
                            res.data[i].width / res.data[i].height == 0.5625
                                ? "VIDEO_VERTICAL"
                                : "VIDEO_LARGE",
                    });
                }
                for (let i in list) {
                    for (let a in this.hasCheck) {
                        if (list[i].id == this.hasCheck[a].material.id) {
                            list[i].checked = true;
                        }
                    }
                }
                this.tableData = list;
            }
        },

        // 获取达人视频
        async getAwemeVideo() {
            this.loading = true;
            this.isload3 = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_awemevideo",
                {
                    aweme_id: this.aweme_id,
                    advertiser_id: this.titokInfo.advertiser_id,
                    product_id: this.product_id,
                    ...this.awemeInfo,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.isload3 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.isload3 = false;
                this.awemeInfo = res.data.page_info;
                let list = [];
                let result = res.data.video_list;
                for (let i in result) {
                    list.push({
                        type: 3,
                        checked: false,
                        title: result[i].title,
                        aweme_item_id: result[i].aweme_item_id,
                        id: result[i].video_id,
                        material: result[i].url,
                        img_url: result[i].video_cover_url,
                        material_name: md5(result[i].video_cover_url),
                        duration: result[i].duration,
                        width: result[i].width,
                        height: result[i].height,
                        material_id: result[i].material_id,
                        create_time: result[i].create_time,
                        cate_type: "video",
                        stat_cost: 0,
                        show_cnt: 0,
                        click_rate: 0,
                        pay_order_roi: 0,
                        material_source: "OTHER",
                        image_mode: "VIDEO_VERTICAL",
                    });
                }
                for (let i in list) {
                    for (let a in this.hasCheck) {
                        if (list[i].id == this.hasCheck[a].material.id) {
                            list[i].checked = true;
                        }
                    }
                }
                this.tableData = this.tableData.concat(list);
            }
        },

        // 选择视频类型
        selectType() {
            if (this.radio == 1) {
                this.tableData = [];
                this.queryInfo.order = "";
                this.queryInfo.page = 1;
                this.getDataList();
            } else if (this.radio == 2) {
                this.tableData = [];
                this.getTitokVideo();
            } else if (this.radio == 3) {
                this.tableData = [];
                this.awemeInfo = {
                    count: null,
                    cursor: null,
                    has_more: null,
                };
                this.getAwemeVideo();
            }
        },

        // 下拉加载更多
        load() {
            if (this.tableData.length == this.total) {
                this.isload = true;
                this.queryInfo.page = 1;
            } else {
                this.queryInfo.page += 1;
                this.getDataList();
            }
        },

        // 下拉加载更多
        load3() {
            if (this.awemeInfo.has_more == 0) {
                this.isload3 = true;
            } else {
                this.getAwemeVideo();
            }
        },

        // 选择视频
        checkVedio(item) {
            this.$forceUpdate();
            if (item.checked) {
                this.hasCheck.push({
                    material: item,
                    title: item.title ? item.title : "",
                    dynamic_words: [],
                    card: {
                        car_img: this.$parent.dataForm.tableData[0].hasShop.img,
                        car_name: "视频同款商品",
                        car_tag: ["商家倾情推荐"],
                        car_link: "查看详情",
                        is_fisrtchoid: 1,
                    },
                });
            } else {
                let index = this.hasCheck.findIndex(
                    (val) => val.material.id == item.id
                );
                this.hasCheck.splice(index, 1);
            }
        },

        // 删除已选视频
        deletCheck(index, item) {
            this.hasCheck.splice(index, 1);
            let num = this.tableData.findIndex(
                (val) => val.id == item.material.id
            );
            if (num != -1) {
                this.tableData[num].checked = false;
            }
        },

        // 目录筛选
        filteredData(query, list) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name.indexOf(query) !== -1) {
                    return item;
                }
            });
            return list;
        },

        submitForm() {
            this.$parent.createform.creatinfo.creative.push.apply(
                this.$parent.createform.creatinfo.creative,
                this.hasCheck
            );
            this.$parent.sessionSave();
            this.resetForm();
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
            this.radio = 1;
            this.hasCheck = [];
            this.queryInfo.query = "";
            this.queryInfo.date = [];
            this.queryInfo.order = "";
            this.queryInfo.cate_id = "";
            this.queryInfo.field = "create_time";
            this.tableData = [];
        },
    },
    components: {},
};
</script>

<style scoped>
.seach_mt {
    height: 72px;
    padding: 0 20px;
}
.demand_center {
    padding: 0;
    margin: 0 20px;
    border: 1px solid #ebebeb;
}
.mat_head {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
    font-size: 14px;
    color: #17233d;
}
.person_left {
    width: 292px;
    flex-shrink: 0;
    border-right: 1px solid #ebebeb;
}
.person_right {
    flex: 1;
    overflow: auto;
}

.person_header {
    padding: 0 20px;
    height: 59px;
    border-bottom: 1px solid #ebebeb;
}
.person_title {
    font-size: 16px;
    font-weight: bold;
}

.person_center {
    padding: 20px 20px 0;
    overflow-y: auto;
}

.person_job {
    overflow-y: auto;
}

.per_tab {
    justify-content: center;
}
.per_tab li {
    height: 59px;
    line-height: 59px;
    padding: 0 20px;
    position: relative;
    font-size: 16px;
    color: #616c85;
    cursor: pointer;
}
.per_tab li::after {
    transform: scaleX(0);
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    border-top: 2px solid #4475ff;
    transition: all 0.3s;
}
.per_tab li.active {
    color: #17233d;
}
.per_tab li.active::after {
    transform: scaleX(1);
}

.person_btn {
    padding: 20px;
}
.custom-tree-node {
    height: 48px;
}
.tree_title {
    font-size: 14px;
    color: #17233d;
    margin-left: 10px;
}
.part_right {
    position: absolute;
    right: 10px;
    display: none;
}
.mt_head {
    height: 59px;
    padding: 0 20px;
}
.mt_border {
    border-bottom: 1px solid #ebebeb;
}
.mat_footer {
    height: 60px;
    padding: 0 20px;
}
.has_text {
    font-size: 14px;
    color: #b4b7bd;
}
.has_mat {
    position: relative;
    width: 28px;
    height: 40px;
    border-radius: 2px;
    margin-left: 16px;
}
.has_img {
    width: 28px;
    height: 40px;
}
.mar_close {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 3;
    cursor: pointer;
}
.mt_tab {
    padding: 0 20px;
    padding-top: 20px;
}
</style>

<style>
.part_tree .el-tree-node__content {
    height: 48px;
    position: relative;
}
.part_tree .el-tree-node__expand-icon {
    color: #17233d;
    margin-left: 15px;
}
.part_tree .el-tree-node__expand-icon.is-leaf {
    color: transparent;
}
.part_tree .el-tree-node__content:hover {
    background-color: #f6f8ff;
}
.ma_check {
    position: absolute !important;
    z-index: 3;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.ma_check .el-checkbox__inner {
    width: 18px;
    height: 18px;
}
.ma_check .el-checkbox__inner::after {
    top: 3px;
    left: 6px;
}
</style>


